<!DOCTYPE html5>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">


    

</head>
<body>


<!-- 头部 -->
<div class="head">
    <div class="head_top">
      <h1 ><a href="#"><img src="picture/thumbnail_large.webp" alt="" class="logo"></a></h1>
      
      <div class="head_search">
  <form action="">
        <input type="text" class="sear_input" placeholder="搜索音乐、MV、歌单、用户">
        
        <button  type="button"   class="button1">
        <img src="picture\R-C.png" alt="">
        </button>
      
  </form>


      </div>
      
<div>
      <ul class="top_list">
        <li class="first-0"><a href="#">音乐馆</a></li>
        <li class=""><a href="music1.html">我的音乐</a></li>
        <li><a href="HTML项目 wty\vip.html">VIP</a></li>
      </ul>

        <div class="boundary">
        </div>

      <div class="head_right">
        <a href="HTML项目slh\log.html" class="land">登录</a>
      </div>
</div>

</div>
      <ul class="subnav">
        <li class="first-1"><a href="#" >首页</a></li>
        <li ><a href="HTML项目 wty\singer.html">歌手</a></li>
        <li><a href="music2.html">电台</a></li>
        <li><a href="HTML项目slh\mv.html">MV</a></li> 
      </ul>
    
  </div>
  <!-- 头部 -->





  <!--歌单推荐-->
  <div class="song-reco">
    <div class="reco-con">

      <h2 class="tit">歌单推荐</h2>

      

      <ul class="reco-list">
        <li class="play_name">
         
         
        </li>

        <li>

          <div class="">
            <a href="#"><img src="picture/1.png" class="imag1"></a>
            <h3 class="movie_list_title">海外爆火神曲:InternetHits</h3>
          

            <div class="movie_list_info">
              <span>
                <i class="movie_list_listen_icon "></i>
                <i>播放量:9935.9万</i>
              </span>
            </div>

          </div>
  

          <div >
          </div>

        </li>
        <li>
          <div class="">
            <a href="#"><img src="picture/2.png" class="imag1"></a>
            <h3 class="movie_list_title">到点了该emo了,00后的听歌现状</h3>
            

            <div class="movie_list_info">
              <span>
                <i class="movie_list_listen_icon "></i>
                <i>播放量：3355.7万</i>
              </span>
            </div>

          </div>
  
          <div>
          </div>
        </li>
        
        <li >
          <div class="imag_1">
            <a href="#"><img src="picture/3.png" class="imag1"></a>
            <h3 class="movie_list_title">抖音超热中文歌:一次听个够</h3>
           
            <div class="movie_list_info">
              <span>
                <i class="movie_list_listen_icon "></i>
                <i>播放量:1173.1万</i>
              </span>
            </div>
          </div>
  
          <div>
          </div>
        </li>

        
        <li>
          <div class="imag_1">
            <a href="#"><img src="picture/4.png" class="imag1"></a>
            <h3 class="movie_list_title">抖音爆款:不可错过的热门旋律</h3>
           
            <div class="movie_list_info">
              <span>
                <i class="movie_list_listen_icon "></i>
                <i>播放量:3465.1万</i>
              </span>
            </div>
          </div>
  
        </li>
        <li>
          <div class="imag_1">
            <a href="#"><img src="picture/5.png" class="imag1"></a>
            <h3 class="movie_list_title">这些歌,光是听到就已经很遗憾了 </h3>
            
            <div class="movie_list_info">
              <span>
                <i class="movie_list_listen_icon "></i>
                <i>播放量:2635.0万</i>
              </span>
            </div>
          </div>
  
        </li>
        
        
      </ul>





    </div>
  </div>
<!-- 歌单推荐 -->






<!-- 新歌首发 -->

<div class="song-reco1">
  <div class="reco-con">

    

  <h3 class="tit">新歌首发</h2>


    <div id="tab-1" >
      
    <div class="tab">
      <button  class="first-2" onclick="tab1()">最新</a>
      <button  onclick="tab2()">内地</a>
      <button >港台</a>
      <button >欧美</a>
      <button >韩国</a>
      <button >日本</a>
    </div>


    <ul>
      <li class="one_list">

        <div class="imag_2">
          <a href="#"><img src="picture/a1.png" class="imag2"></a>
          <h3 class="movie_list_title movie_list_title1">第十幕 （Episode X） </h3>
          <br>
          <div class="movie_list_info">
            <span>
              <i class=" movie_list_listen_icon1 ">迪丽热巴</i>
              
            </span>
          </div>
        </div>

      </li>


      <li class="one_list">
        <div class="imag_2">
          <a href="#"><img src="picture/a2.png" class="imag2"></a>
          <h3 class="movie_list_title movie_list_title1">观雪《墨雨云间》 </h3>
          <br>
          <div class="movie_list_info">
            <span>
              <i class=" movie_list_listen_icon1 ">王心凌</i>
              
            </span>
          </div>
        </div>
      </li>

      <li class="one_list">
        <div class="imag_2">
          <a href="#"><img src="picture/a3.png" class="imag2"></a>
          <h3 class="movie_list_title movie_list_title1">凡人之躯《末代厨娘》 </h3>
          <br>
          <div class="movie_list_info">
            <span>
              <i class=" movie_list_listen_icon1 ">张远</i>
              
            </span>
          </div>
        </div>
      </li>

      <li class="one_list">
        <div class="imag_2">
          <a href="#"><img src="picture/a4.png" class="imag2"></a>
          <h3 class="movie_list_title movie_list_title1">有光《我才不要和你》 </h3>
          <br>
          <div class="movie_list_info">
            <span>
              <i class=" movie_list_listen_icon1 ">黄子弘凡</i>
              
            </span>
          </div>
        </div>
      </li>

      <li class="one_list">
        <div class="imag_2">
          <a href="#"><img src="picture/a5.png" class="imag2"></a>
          <h3 class="movie_list_title movie_list_title1">时光语墨《柳叶摘星辰》 </h3>
          <br>
          <div class="movie_list_info">
            <span>
              <i class=" movie_list_listen_icon1 ">徐明浩</i>
              
            </span>
          </div>
        </div>
      </li>

      <li class="one_list">
        <div class="imag_2">
          <a href="#"><img src="picture/a6.png" class="imag2"></a>
          <h3 class="movie_list_title movie_list_title1">一生一伴 </h3>
          <br>
          <div class="movie_list_info">
            <span>
              <i class=" movie_list_listen_icon1 ">海陆</i>
              
            </span>
          </div>
        </div>
      </li>
      <li class="one_list">
        <div class="imag_2">
          <a href="#"><img src="picture/a7.png" class="imag2"></a>
          <h3 class="movie_list_title movie_list_title1">EXIT郭富城iconic </h3>
          <br>
          <div class="movie_list_info">
            <span>
              <i class=" movie_list_listen_icon1 ">郭富城</i>
              
            </span>
          </div>
        </div>
      </li>


      <li class="one_list">
        <div class="imag_2">
          <a href="#"><img src="picture/a8.png" class="imag2"></a>
          <h3 class="movie_list_title movie_list_title1">相系《柳叶摘星辰》 </h3>
          <br>
          <div class="movie_list_info">
            <span>
              <i class=" movie_list_listen_icon1 ">蒋敦豪</i>
              
            </span>
          </div>
        </div>
      </li>

      <li class="one_list">
        <div class="imag_2">
          <a href="#"><img src="picture/a9.png" class="imag2"></a>
          <h3 class="movie_list_title movie_list_title1">Shooting Star </h3>
          <br>
          <div class="movie_list_info">
            <span>
              <i class=" movie_list_listen_icon1 ">Kepler</i>
              
            </span>
          </div>
        </div>
      </li>
    </ul>

</div>


<div id="tab-2" >


  <div class="tab">
    <button href=""  onclick="tab1()">最新</a>
    <button href="" class="first-2" onclick="tab2()">内地</a>
    <button href="">港台</a>
    <button href="">欧美</a>
    <button href="">韩国</a>
    <button href="">日本</a>
  </div>


  <ul>
    <li class="one_list">

      <div class="imag_2">
        <a href="#"><img src="picture/c1.png" class="imag2"></a>
        <h3 class="movie_list_title movie_list_title1">蜉蝣 </h3>
        <br>
        <div class="movie_list_info">
          <span>
            <i class=" movie_list_listen_icon1 ">马嘉祺</i>
            
          </span>
        </div>
      </div>

    </li>


    <li class="one_list">
      <div class="imag_2">
        <a href="#"><img src="picture/c2.png" class="imag2"></a>
        <h3 class="movie_list_title movie_list_title1">嗨 </h3>
        <br>
        <div class="movie_list_info">
          <span>
            <i class=" movie_list_listen_icon1 ">周深</i>
            
          </span>
        </div>
      </div>
    </li>

    <li class="one_list">
      <div class="imag_2">
        <a href="#"><img src="picture/c3.png" class="imag2"></a>
        <h3 class="movie_list_title movie_list_title1">忘不了(Live) </h3>
        <br>
        <div class="movie_list_info">
          <span>
            <i class=" movie_list_listen_icon1 ">那英</i>
            
          </span>
        </div>
      </div>
    </li>

    <li class="one_list">
      <div class="imag_2">
        <a href="#"><img src="picture/c4.png" class="imag2"></a>
        <h3 class="movie_list_title movie_list_title1">Step </h3>
        <br>
        <div class="movie_list_info">
          <span>
            <i class=" movie_list_listen_icon1 ">张艺兴</i>
            
          </span>
        </div>
      </div>
    </li>

    <li class="one_list">
      <div class="imag_2">
        <a href="#"><img src="picture/c5.png" class="imag2"></a>
        <h3 class="movie_list_title movie_list_title1">Back to Life</h3>
        <br>
        <div class="movie_list_info">
          <span>
            <i class=" movie_list_listen_icon1 ">王源</i>
            
          </span>
        </div>
      </div>
    </li>

    <li class="one_list">
      <div class="imag_2">
        <a href="#"><img src="picture/c6.png" class="imag2"></a>
        <h3 class="movie_list_title movie_list_title1">无荒《铁血丹心》 </h3>
        <br>
        <div class="movie_list_info">
          <span>
            <i class=" movie_list_listen_icon1 ">谭维维</i>
            
          </span>
        </div>
      </div>
    </li>
    <li class="one_list">
      <div class="imag_2">
        <a href="#"><img src="picture/c7.png" class="imag2"></a>
        <h3 class="movie_list_title movie_list_title1">龙Loong(Live) </h3>
        <br>
        <div class="movie_list_info">
          <span>
            <i class=" movie_list_listen_icon1 ">GAI周延</i>
            
          </span>
        </div>
      </div>
    </li>


    <li class="one_list">
      <div class="imag_2">
        <a href="#"><img src="picture/c8.png" class="imag2"></a>
        <h3 class="movie_list_title movie_list_title1">我走后(Live) </h3>
        <br>
        <div class="movie_list_info">
          <span>
            <i class=" movie_list_listen_icon1 ">杨坤/于文文</i>
            
          </span>
        </div>
      </div>
    </li>

    <li class="one_list">
      <div class="imag_2">
        <a href="#"><img src="picture/c9.png" class="imag2"></a>
        <h3 class="movie_list_title movie_list_title1">唯情不变(Live) </h3>
        <br>
        <div class="movie_list_info">
          <span>
            <i class=" movie_list_listen_icon1 ">黄龄/张睿/戚琦</i>
            
          </span>
        </div>
      </div>
    </li>
  </ul>

</div>



</div>
</div>






<script >

  function tab1(){
      document.getElementById('tab-1').style.display='block';
      document.getElementById('tab-2').style.display='none';
  }
  
  function tab2(){
      document.getElementById('tab-1').style.display='none';
      document.getElementById('tab-2').style.display='block';
  }
  
  </script>
<!-- 新歌首发 -->






<!-- 新碟首发 -->
<div class="song-reco">
  <div class="reco-con">

    <h2 class="tit">新碟首发</h2>

    <div class="tab">
      <button  class="first-2">内地</a>
      <button >港台</a>
      <button >欧美</a>
      <button >韩国</a>
      <button >日本</a>
      <button >其他</a>
    </div>

    <ul class="reco-list">
      <li class="play_name">
       
       
      </li>

      <li>

        <div class="">
          <a href="#"><img src="picture/b1.png" class="imag1"></a>
          <h3 class="movie_list_title">你会忘了我</h3>
        

          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon2 "></i>
              <i>苏星婕</i>
            </span>
          </div>

        </div>


        <div >
        </div>

      </li>
      <li>
        <div class="">
          <a href="#"><img src="picture/b2.png" class="imag1"></a>
          <h3 class="movie_list_title">牧者影视配乐精选·壹</h3>
          

          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon2 "></i>
              <i>刘锐/王星</i>
            </span>
          </div>

        </div>

        <div>
        </div>
      </li>
      
      <li >
        <div class="imag_1">
          <a href="#"><img src="picture/b3.png" class="imag1"></a>
          <h3 class="movie_list_title">一生一伴 (feat.王铮亮)</h3>
         
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon2 "></i>
              <i>海陆</i>
            </span>
          </div>
        </div>

        <div>
        </div>
      </li>

      
      <li>
        <div class="imag_1">
          <a href="#"><img src="picture/b4.png" class="imag1"></a>
          <h3 class="movie_list_title">启航的歌</h3>
         
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon2 "></i>
              <i>ChiliChili</i>
            </span>
          </div>
        </div>

      </li>
      <li>
        <div class="imag_1">
          <a href="#"><img src="picture/b5.png" class="imag1"></a>
          <h3 class="movie_list_title">可可西里没有海 </h3>
          
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon2 "></i>
              <i>庄淇文29</i>
            </span>
          </div>
        </div>

      </li>
      
      
    </ul>



    <ul class="reco-list">
      <li class="play_name">
       
       
      </li>

      <li>

        <div class="">
          <a href="#"><img src="picture/b6.png" class="imag1"></a>
          <h3 class="movie_list_title">遗憾的花</h3>
        

          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon2 "></i>
              <i>苏星婕</i>
            </span>
          </div>

        </div>


        <div >
        </div>

      </li>
      <li>
        <div class="">
          <a href="#"><img src="picture/b7.png" class="imag1"></a>
          <h3 class="movie_list_title">Give Me That - The 5th Mini Album</h3>
          

          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon2 "></i>
              <i>威神V</i>
            </span>
          </div>

        </div>

        <div>
        </div>
      </li>
      
      <li >
        <div class="imag_1">
          <a href="#"><img src="picture/b8.png" class="imag1"></a>
          <h3 class="movie_list_title">凡人之躯</h3>
         
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon2 "></i>
              <i>张远</i>
            </span>
          </div>
        </div>

        <div>
        </div>
      </li>

      
      <li>
        <div class="imag_1">
          <a href="#"><img src="picture/b9.png" class="imag1"></a>
          <h3 class="movie_list_title">第十幕 (Episode X)</h3>
         
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon2 "></i>
              <i>迪丽热巴</i>
            </span>
          </div>
        </div>

      </li>
      <li>
        <div class="imag_1">
          <a href="#"><img src="picture/b10.png" class="imag1"></a>
          <h3 class="movie_list_title">庆余年第二季 影视原声带 </h3>
          
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon2 "></i>
              <i>李健/周深/梁龙/刘瑞瑞</i>
            </span>
          </div>
        </div>

      </li>
      
      
    </ul>


  </div>
</div>






<!-- 新碟首发 -->


<!-- 排行榜 -->



<!-- 排行榜 -->


  <!--底部-->
  <div class="foot">
    <div class="copyright">
      <p>
        <a href="#">AboutUS</a> |
        <a href="#">服务条款</a> |
        <a href="#">用户服务协议</a> |
        <a href="#">隐私政策</a> |
        <a href="#">权利声明</a> |
        <a href="#">客服中心</a> |
        <a href="#">网站导航</a>
      </p>
    </div>
  </div>
  <!-- 底部 -->



</body>
</html>